<template>
  <div class="cule-container-dialog"
    v-loading="listLoading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)">
    <div class="clue-content-dialog">
      <div 
        :class="['clue-item', {'no-bottom': index === joinClueList.length - 1}]" 
        v-for="(item, index) in joinClueList" 
        :key="index">
        <el-checkbox v-model="item.checked"></el-checkbox>
        <span class="item-name">{{item.name}}</span>
      </div>
    </div>
    <div class="item-add" @click="addClue">+ 新增线索集</div>
    <div class="item-new" v-if="joinNew">
      <el-input 
        class="item-input" 
        v-model="addClueName" 
        placeholder="请输入内容"
        maxlength="30"
        clearable></el-input>
      <span class="el-icon-check" @click="newSure"></span>
      <span class="el-icon-close" @click="joinNew = false"></span>
    </div>
    <div class="add-empty" v-else></div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import { ClueResource } from '../axios/index';
  export default {
    name: 'AddClue',
    data () {
      return {
        // 线索集列表
        joinClueList: [],
        // 新增线索
        joinNew: false,
        addClueName: '',
        listLoading: false
      }
    },
    props: {
      id: {
        type: Number,
        default: null
      },
      taskId: {
        type: Number,
        default: null
      }
    },
    created () {
    },
    mounted() {
      this.getClueList();
    },
    methods: {
      // 获取线索集信息
      getClueList() {
        let interfaceName = null;
        if(this.userInfo.role === 1) {
          interfaceName = ClueResource.joinClue({
            rybm: this.userInfo.rybm,
            id: this.id
          })
        }
        else {
          interfaceName = ClueResource.queryInquisitorCollection({
            rybm: this.userInfo.rybm,
            id: this.id
          })
        }
        let returnTrue = false;
        setTimeout(() => {
          if(!returnTrue) {
            this.listLoading = true;
          }
        }, 100)
        interfaceName
        .then(res => {
          returnTrue = true;
          this.listLoading = false;
          if(res.data) {
            this.joinClueList = res.data.map(item => {
              item.checked = false;
              return item
            })
          }
        })
        .catch(() => {
          returnTrue = true;
          this.listLoading = false;
        })
      },
      // 新增线索集
      addClue() {
        this.joinNew = true;
        this.addClueName = '';
      },
      // 新建确认
      newSure() {
        if(!this.addClueName) {
          this.$message.error('线索名称不能为空')
          return
        }
        // 重名校验
        if(this.joinClueList.find(item => item.name === this.addClueName)) {
          this.$message.error('线索名称不能重复')
          return
        }
        let interfaceName = null;
        if(this.userInfo.role === 1) {
          interfaceName = ClueResource.addClue({
            rybm: this.userInfo.rybm,
            name: this.addClueName,
            taskId: this.taskId
          })
        }
        else {
          interfaceName = ClueResource.addInquisitorCollection({
            rybm: this.userInfo.rybm,
            name: this.addClueName,
            mc: this.userInfo.mc,
            dlbm: this.userInfo.dlbm,
            dwbm: this.userInfo.dwbm,
            dwmc: this.userInfo.dwmc
          })
        }
        this.listLoading = true;
        // 保存新建名称，并刷新列表
        interfaceName
        .then(res => {
          if(res.data) {
            this.getClueList()
            this.joinNew = false;
            this.addClueName = '';
            // this.$nextTick(() => {
            //   // 滚动条滚到最下面
            //   document.querySelector('.clue-content-dialog').scrollTop = document.querySelector('.clue-content-dialog').scrollHeight + 40; 
            // })
          }
        })
        .catch(() => {
          this.listLoading = false;
        })
      },
      // 确认
      clueSure() {
        // 判断有没有选择
        let paramsList = [];
        this.joinClueList.forEach(item => {
          if(item.checked) {
            paramsList.push(item);
          }
        })
        if(paramsList.length === 0) {
          this.$message.error('未选择线索集，请重新选择！')
          return
        }
        this.$emit('joinClueClose', paramsList);
      }
    },
    computed: {
      ...mapGetters({
        userInfo: "getUserInfo"
      })
    }
  };
</script>
<style lang="scss" scoped>
  .cule-container-dialog {
    width: 100%;
    height: 100%;
    line-height: 24px;
    .clue-content-dialog {
      color: #535C68;
      font-size: 14px;
      height: calc(100% - 64px);
      max-height: calc(70vh - 234px);
      overflow: auto;
      .clue-item {
        margin-bottom: 8px;
        .item-name {
          margin-left: 8px;
        }
      }
      .clue-item.no-bottom {
        margin-bottom: 0px;
      }
    }
    .item-add {
      color: #3C86F5;
      cursor: pointer;
      margin-bottom: 8px;
      margin-top: 8px;
    }
    .item-input {
      width: 208px;
    }
    .el-icon-check, .el-icon-close {
      color: #3C86F5;
      font-size: 18px;
      cursor: pointer;
      margin-left: 14px;
    }
    .item-new {
      margin-bottom: 16px;
    }
    .add-empty {
      height: 40px;
      margin-bottom: 16px;
    }
  }
</style>




